<template>
  <div class="table center-box aa">
      <div class="table-cell">
        <div class="center-form">
         
          <p class="title">注册-完善个人信息</p>
          <el-form ref="form" :rules="rules" class="form-box" :model="form" label-width="80px">
            <el-form-item>
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <p v-else class="avatar-uploader-icon">
                    上传头像
                  </p>
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                </el-upload>
            </el-form-item>
            <el-form-item prop="name">
                  <el-input placeholder="身份证名称" v-model.trim="form.name" class="input-with-select">
                  </el-input>
              </el-form-item>
              <el-form-item prop="idcard">
                  <el-input placeholder="身份证号码"  v-model.trim="form.idcard" class="input-with-select">
                  </el-input>
              </el-form-item>
              <el-form-item prop="username">
                  <el-input placeholder="昵称"  v-model.trim="form.username" class="input-with-select">
                  </el-input>
              </el-form-item>
              <el-form-item prop="textarea">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="简介"
                    v-model.trim="form.textarea">
                  </el-input>
              </el-form-item>
              <el-form-item>
                  <div class="fb-submit">
                      <button class="btn-submit" type="button" @click="submitForm('form')">注册</button>
                    </div>
              </el-form-item>
            </el-form>
        </div>
      </div>
      <copy></copy>
  </div>
</template>

<script>
import copy from "@/components/copyRight.vue";
export default {
  components: {
        copy
    },
    data () {
          var validatename = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('身份证姓名不能为空'));
            }
            if(value.length < 2){
              return callback(new Error('身份证姓名长度大于等于2!'));
            }
            callback();
          };
          var validateidcard = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('身份证号码不能为空'));
            }
            if(!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value))){
              return callback(new Error('身份证号码格式不正确!'));
            }
            callback();
          };
          var validateusername = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('昵称不能为空!'));
            }
            callback();
          };
          var validatetextarea = (rule, value, callback) => {
            
            if (!value) {
              return callback(new Error('简介不能为空'));
            }
            
            callback();
          };
          return {
            form: {
              name:"",
              idcard:"",
              username:"",
              textarea:"",
            },
            imageUrl: '',
            rules: {
              name: [
                { validator: validatename, trigger: 'blur' }
              ],
              idcard: [
                { validator: validateidcard, trigger: 'blur' }
              ],
              username: [
                { validator: validateusername, trigger: 'blur' }
              ],
              textarea: [
                { validator: validatetextarea, trigger: 'blur' }
              ],
            }
          }
        },
        methods: {
          handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            // if (!isJPG) {
            //   this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
          },
          onSubmit() {
            console.log('submit!');
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.$router.push("/home");
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          }
        }
}
</script>

<style>

</style>